$(function () {
    $('#camera_info_list').empty()
    //$('#camera_info_list').append('<li><span>序号</span> <span>IP地址</span> <span>具体位置</span> <span>工作状态</span> <span>偏移状态</span> <span>便宜日期</span> <span>便宜日期</span></li>')
    // 界面加载时填充camera info列表 从cookie取"current_region"，取不到则使用“ALL”作为查找条件
    let current_region = $.cookie("current_region")
    if (current_region === undefined) {
        current_region = 'ALL';
        $.cookie("current_region", 'ALL')
    }
    $('#show_selected_region').text('当前区域：' + current_region)
    $.post('/show_data/', {'region': current_region}, function (res) {

        for (let i in res.all_camera_ip) {
            $('#camera_info_list').append('<li><span>' + res.all_camera_ip[i][0] + '</span> <span>' + res.all_camera_ip[i][1]
                + '</span><span>' + res.all_camera_ip[i][2] + '</span><span class="work_status">正常运行</span><span id="' + res.all_camera_ip[i][1] + '">无偏移</span>' +
                '<span>--</span><span ><span style="width: 28%; height: 70%; font-size: small" disabled class="btn btn-primary show_img"'
                + 'img_path="">查看偏移图像</span><span style="margin-left: 20px;width: 20%; height: 70%; font-size: small" ' +
                'class="btn btn-primary show_offset_record" img_path="">偏移记录</span>' +
                '<span camera_ip="' + res.all_camera_ip[i][1] + '" style="margin-left: 20px;width: 25%; height: 70%; font-size: small" ' +
                'class="btn btn-primary reset_camera">重置摄像头</span></span></li>')
        }
    })

    let $cook = $.cookie('already_ran');
    if ($cook !== 'true') {
        console.log('run main loop')
        /* 调用一次主程序 后台开始循环执行主程序 */
        $.post('/main_loop/')
        $.post('/main_loop_sensitive/')
        //设置cookie
        $.cookie("already_ran", 'true')
    } else {
        console.log('already ran main loop')
        //删除cookie,传递null值#}
        //$.cookie("mycolor", null);
    }


    /* 递归调用本函数 每一秒请求一次后端 得到偏移摄像头信息 */
    function get_offset_status() {
        $.post('/camera_offset/', function (res) {
                if (res.offset_camera_data.length !== 0) {
                    let offset_camera_data = res.offset_camera_data
                    for (let r in offset_camera_data) {
                        let offset_ip = offset_camera_data[r].ip
                        let offset_image_path = offset_camera_data[r].offset_image_path
                        let offset_time = offset_camera_data[r].offset_time
                        let region = offset_camera_data[r].region
                        let ip_obj = $('#' + offset_ip)
                        ip_obj.next().next().children().first().attr('img_path', offset_image_path)
                        ip_obj.next().next().children().first().removeAttr('disabled')
                        ip_obj.text('摄像头偏移').css('color', 'red')
                        ip_obj.next().text(offset_time)
                        /////////////////////////////////////////////////////
                        //alert('摄像头偏移'+'\n' +"IP:" + offset_ip + '\n' + "偏移日期:" + offset_time)
                        let curr_region = $.cookie("current_region")
                        if (curr_region === region || curr_region === 'ALL') {
                            if (Notification.permission === "granted" && $.cookie(offset_ip + '_haven_pop') !== 'true') {
                                voicePaly() // 开启声音报警 放这里可以蹭弹窗的cookie来确定当前是否有音频播放
                                let notification = new Notification("摄像头偏移", {
                                    body: "IP:" + offset_ip + '\n' + "偏移日期:" + offset_time,
                                    icon: '/static/images/offset1.png',
                                    requireInteraction: true // 设置通知弹框是否自动消失 默认为false（自动消失）
                                });
                                $.cookie(offset_ip + "_haven_pop", 'true')
                                notification.onclick = function () {
                                    console.log('click notification pop')
                                    $.cookie(offset_ip + "_haven_pop", 'false')
                                }
                            }
                        }
                        /////////////////////////////////////////////////////
                    }
                }
                // 摄像头工作状态判断
                $('.work_status').removeAttr('disabled')
                $('#reset_camera').css('display', '')
                if (res.die_camera_data.length !== 0) {
                    for (let e_ip in res.die_camera_data) {
                        let die_ip = res.die_camera_data[e_ip]
                        $('#' + die_ip).prev().text('未开启').css('color', '#FF0000')
                        $('span[camera_ip=' + die_ip + ']').attr('disabled', '')
                    }


                }
            }
        )
        setTimeout(get_offset_status, 1000)

    }

    get_offset_status()
})


/////////////////////
// 声音报警
let audio;

function voicePaly() {
    audio = "../static/audio/_.wav";
    audio = new Audio(audio);

    function play() {
        audio.play()
    }

    // 循环播放，播放结束继续播放
    $(audio).unbind("ended").bind("ended", function () {
        setTimeout(play, 200)
    })
    audio.play();
}

function voiceClose() {
    audio.pause();
}


////////////////////

/* 当点击非图像展示框以及展示图片按钮时 隐藏图像展示框 */
$(document).click(function (e) {
    var $target = $(e.target);

    if (!$target.is('#img_show_table *') && !$target.is('.show_img') && !$target.is('#offset_record_table *') && !$target.is('.show_offset_record')) {
        $('#img_show_table').hide();
        $('#offset_record_table').hide();
        $('#camera_info').css('filter', 'blur(0px)')
    }

});

$(document).ready(function () {
    var whei = $(window).width()
    $("html").css({fontSize: whei / 20})
    $(window).resize(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $('#html_body').css('zoom',whei/1920)
    });
});
window.onload = function () {   //加载页面的时候就执行
    var html_body_obj = document.getElementById("html_body");  //根据ID获取html元素
    var heigth_screen = window.screen.height;    //获取整个屏幕的分辨率
    var width_screen = window.screen.width;

}
/* 重置摄像头 */
$(document).on('click', '.reset_camera', function () {
    if ('disabled' in this.attributes) {
    } else {
        let this_ip = this.attributes.camera_ip.nodeValue
        let prev_this = $(this).prev().prev()
        $.post('/reset_camera/', {'ip': this_ip}, function (res) {
            if (res.status === 200) {
                // 关闭报警
                if (audio !== undefined) {
                    voiceClose()
                }
                prev_this.attr('disabled', '')
                $('#' + this_ip).text('无偏移').css('color', '').next().text('--')
                $.cookie(this_ip + "_haven_pop", null) // 清除该ip摄像头的cookie 防止弹窗失效
            } else {
                alert('重置失败')
            }
        })
    }
})

/* 显示图像框 并模糊其他 */
$(document).on('click', '.show_img', function () {
    if ('disabled' in this.attributes) {
    } else {
        $('#img_show_table').css('display', '')
        $('#camera_info').css('filter', 'blur(20px)')
        let this_ip = $(this).next().next()[0].attributes.camera_ip.nodeValue
        let offset_img_path = this.attributes.img_path.nodeValue

        $('#origin_img').attr('src', '/static/img_data/raw/' + this_ip + '_raw.jpg')
        $('#offset_img').attr('src', offset_img_path)

        let reg = new RegExp("_", "g");//g,表示全部替换。
        this_ip = this_ip.replace(reg, ".");
        $('#img_show_ip').text('摄像头IP：' + this_ip)
    }
})

/* 显示历史记录 并模糊其他 */
/* append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的click事件没有生效 */
// $('.show_offset_record').click(function () {})
$(document).on('click', '.show_offset_record', function () {
    $('#offset_record_list').empty()
    $('#offset_record_table').css('display', '')
    $('#img_show_table').css('display', 'none')
    let this_ip = $(this).next()[0].attributes.camera_ip.nodeValue
    $('#camera_info').css('filter', 'blur(20px)')
    $.post('/offset_record/', {'ip': this_ip}, function (res) {
        if (res.offset_camera_record.length === 0) {
            $('#offset_record_list').append('<img src="/static/images/no_data.jpg" style="width:100%;height:100%;opacity:0.3;">')
        }
        for (let i = 0; i < res.offset_camera_record.length; i++) {
            let rest_time = res.offset_camera_record[i]["reset_date"]
            if (rest_time !== null) {
                rest_time = res.offset_camera_record[i]["reset_date"].replace(/T/g, ' ')
            }
            $('#offset_record_list').append("<li><span>" + i + "</span>" + "<span>" + res.offset_camera_record[i]["ip"] + "</span>" + "<span>" + res.offset_camera_record[i]["offset_date"].replace(/T/g, ' ') + "</span>" + "<span>" + rest_time + "</span></li>")
        }


    })

    // let offset_img_path = this.attributes.img_path.nodeValue
    //
    // $('#origin_img').attr('src', '/static/img_data/raw/' + this_ip + '_raw.jpg')
    // $('#offset_img').attr('src', offset_img_path)
    //
    // let reg = new RegExp("_", "g");//g,表示全部替换。
    // this_ip = this_ip.replace(reg, ".");
    // $('#img_show_ip').text('摄像头IP：' + this_ip)
})